*{
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    font-family: patlafont;
}

html,body{
    width: 100vw;
background: white;
}

.loading_screen{
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: fixed;
    padding: 24px;
    z-index: 15;
}

.grid_con {
    display: -ms-grid;
    display: grid;
    
    grid-template-columns: repeat(3, 1fr);
    
    grid-template-rows: repeat(3, 1fr);
    height: 100%;
    width: 100%;
    z-index: 2;
    position: relative;
    /* align-items: end; */
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.grid_con > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}

.grid_con > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
}

.grid_con > *:nth-child(3) {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
}

.grid_con > *:nth-child(4) {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
}

.grid_con > *:nth-child(5) {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
}

.grid_con > *:nth-child(6) {
    -ms-grid-row: 2;
    -ms-grid-column: 3;
}

.grid_con > *:nth-child(7) {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
}

.grid_con > *:nth-child(8) {
    -ms-grid-row: 3;
    -ms-grid-column: 2;
}

.grid_con > *:nth-child(9) {
    -ms-grid-row: 3;
    -ms-grid-column: 3;
}

.heroImg{
    position: absolute;
    top: 0;
    left: 0;
    /* background: url(/vidgif/splash.gif); */
    /* background-position: center; */
    /* background-size: cover; */
width: 100%;
height: 100%;

    z-index: 2;
}

.heroImg img{
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
   
}

.splash_screen_logo{
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: 1;
    grid-row: 1;
    width: 12rem;
    -ms-grid-column-align: center;
        justify-self: center;
        overflow-y: hidden;
    
}

.splash_screen_logo img{
    width: 100%;
    mix-blend-mode: difference;

}


    .loading_section {
        -ms-grid-column: 3;
        grid-column: 3;
        -ms-grid-row: 3;
        grid-row: 3;
        font-size: 24px;
        /* align-self: inherit; */
        -ms-grid-column-align: center;
            justify-self: center;
        color: white;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex
    ;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        font-family: 'patlafont';
        opacity: .6;
        gap: 4px;
        -ms-grid-row-align: end;
            align-self: end;
        padding-bottom: 16px;
         margin-bottom: 2rem;
    }


.loading_bar_div{
    height: 16px;
    width: 250px;
    border-radius: 10px 10px 10px 10px;
    border: 2px solid white;
    padding: 2px;
    /*! color: white; */
    z-index: 2;
    /* background-color: white; */
    overflow: hidden;

}

.loading_text_div{
    overflow: hidden;
}

#loading_bar{
    width: 100%;
height: 100%;
background-color: white;
border-radius: 10px 10px 10px 10px;
}


        
@media(max-width: 1536px) {

}
@media(max-width: 1288px) {
    
}
@media (max-width: 1024px) {
  

}

@media (max-width: 1024px) and (max-height:500px){
  
}

@media (max-width: 900px) {
 
}

@media (max-width: 900px) and (max-height: 500px) {
    .loading_bar_div {
        height: 12px;
        width: 220px;
    }

    #loading_text{
        font-size: 20px;
    }
}


@media (max-width: 768px) {
   

}

@media (max-width: 768px) and (max-height: 600px) {
    .loading_bar_div {
        height: 12px;
        width: 220px;
    }

    #loading_text{
        font-size: 20px;
    }
}


@media (max-width: 640px) {
   
}



@media (max-width: 480px) {
    .grid_con {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, 1fr);
    }
    .grid_con > *:nth-child(1) {
        -ms-grid-row: 1;
        -ms-grid-column: 1;
    }
    .grid_con > *:nth-child(2) {
        -ms-grid-row: 2;
        -ms-grid-column: 1;
    }
    .grid_con > *:nth-child(3) {
        -ms-grid-row: 3;
        -ms-grid-column: 1;
    }

    .loading_section{
        -ms-grid-column:1 ;
        grid-column:1 ;
    } 
}